

import React, { useState, useEffect, useRef } from 'react';
import './index.css'
// Sample image URLs (you can replace these with actual URLs)
const generateImageSrc = (index: number) => `https://via.placeholder.com/200?text=Image+${index + 1}`;

const ImageGallery: React.FC = () => {
    const initialImages = Array.from({ length: 100 }, (_, index) => generateImageSrc(index));
    const [images, setImages] = useState<string[]>(initialImages);
    const [loading, setLoading] = useState<boolean>(false);
    const containerRef = useRef<HTMLDivElement>(null);

    const loadMoreImages = () => {
        setLoading(true);

        // Simulate loading more images
        setTimeout(() => {
            const newImages = Array.from({ length: 20 }, (_, index) => generateImageSrc(images.length + index));
            setImages((prevImages) => [...prevImages, ...newImages]);
            setLoading(false);
        }, 1000); // Simulated network delay
    };

    const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {
        const { scrollTop } = event.currentTarget;
        // Check if the user is pulling down
        if (scrollTop === 0) {
            loadMoreImages();
        }
    };

    useEffect(() => {
        const container = containerRef.current;
        if (container) {
            container.addEventListener('scroll', handleScroll);
        }
        return () => {
            if (container) {
                container.removeEventListener('scroll', handleScroll);
            }
        };
    }, []);

    return (
        <div className="image-gallery" ref={containerRef}>
            <div className="image-row">
                {images.map((src, index) => (
                    <div className="image-container" key={index}>
                        <img src={src} alt={`Image ${index + 1}`} className="tu" />
                        <button className="ai-button">AI做同款</button>
                    </div>
                ))}
                {loading && <div className="loading">Loading more images...</div>}
            </div>
        </div>
    );
};

export default ImageGallery;
